:host {
  // 按钮容器宽度
  --ti-transfer-buttons-container-width: 42px;
  // 按钮尺寸
  --ti-transfer-button-size: var(--ti-common-size-5x);
  // 按钮边框
  --ti-transfer-button-border-weight: var(--ti-common-border-weight-normal);
  --ti-transfer-button-border-style: var(--ti-common-border-style-solid);
  --ti-transfer-button-border-radius: var(--ti-common-border-radius-normal);
  // 按钮边框色和背景色
  --ti-transfer-button-color: var(--ti-common-color-bg-emphasize);
  // 按钮图标色
  --ti-transfer-button-icon-color: var(--ti-common-color-icon-white);
  // 按钮边框禁用色
  --ti-transfer-button-border-color-disabled: var(--ti-common-color-line-disabled);
  // 按钮背景禁用色
  --ti-transfer-button-bg-color-disabled: var(--ti-common-color-bg-disabled);
  // 按钮下边距
  --ti-transfer-button-margin-bottom: var(--ti-common-space-base);
  // 水平内边距 = (容器宽度 - 按钮尺寸 - 按钮边框 * 2) / 2
  --ti-transfer-buttons-padding-horizontal: calc(
    (var(--ti-transfer-buttons-container-width) - var(--ti-transfer-button-size) - var(--ti-transfer-button-border-weight) * 2) / 2
  );
}

.ti3-transfer-container {
  display: flex;
}

.ti3-transfer-buttons-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--ti-transfer-buttons-container-width);
  padding: 0 var(--ti-transfer-buttons-padding-horizontal);
  box-sizing: border-box;
}

.ti3-transfer-button {
  width: var(--ti-transfer-button-size);
  height: var(--ti-transfer-button-size);
  border: var(--ti-transfer-button-border-weight) var(--ti-transfer-button-border-style) var(--ti-transfer-button-color);
  border-radius: var(--ti-transfer-button-border-radius);
  line-height: var(--ti-transfer-button-size);
  text-align: center;
  background-color: var(--ti-transfer-button-color);
  font-size: calc(var(--ti-transfer-button-size) * 3 / 5);
  color: var(--ti-transfer-button-icon-color);
  cursor: pointer;
  box-sizing: content-box;

  &:hover,
  &:focus,
  &:active {
    background-color: var(--ti-common-color-bg-hover);
  }
}

// 穿梭框左右button被禁用的样式
.ti3-transfer-button-disabled {
  border: var(--ti-transfer-button-border-weight) var(--ti-transfer-button-border-style) var(--ti-transfer-button-border-color-disabled);
  color: var(--ti-common-color-icon-graybg-disabled);
  background-color: var(--ti-transfer-button-bg-color-disabled);
  cursor: not-allowed;

  &:hover,
  &:focus,
  &:active {
    background-color: var(--ti-transfer-button-bg-color-disabled);
  }
}

.ti3-transfer-right-button {
  margin-bottom: var(--ti-transfer-button-margin-bottom);
}
